import { List } from "./list";
import { SearchPanel } from "./search-panel";
import { useDebounce, useDocumentTitle } from "../../utils";
import styled from "@emotion/styled";
import { useProjects } from "../../utils/project";
import { useUsers } from "../../utils/user";
import { useProjectModal, useProjectSearchParams } from "./util";
import { ButtonNoPadding, ErrorBox, Row } from "../../components/lib";
import { Profiler } from "components/profiler";
export const ProjectListScreen = () => {
  const { open } = useProjectModal();
  const [param, setParam] = useProjectSearchParams();
  const { data: list, error, isLoading } = useProjects(useDebounce(param, 400));
  const { data: users } = useUsers();
  useDocumentTitle("项目列表", false);
  return (
    <Profiler id="项目列表">
      <Container>
        <Row between={true}>
          <h1>项目列表</h1>
          <ButtonNoPadding onClick={open} type="link">
            创建项目
          </ButtonNoPadding>
        </Row>
        <SearchPanel param={param} setParam={setParam} users={users || []} />
        <ErrorBox error={error} />
        <List
          loading={isLoading}
          dataSource={
            list?.map((project) => ({ ...project, key: project.id })) || []
          }
          users={users?.map((user) => ({ ...user, key: user.id })) || []}
        />
      </Container>
    </Profiler>
  );
};
ProjectListScreen.whyDidYouRender = false;
const Container = styled.div`
  padding: 3.2rem;
  flex: 1;
  overflow-y: scroll;
`;
